<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>4-2溢出控制</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        .textBox{
            width: 300px;
            height:100px;
            border: 2px solid red;
            padding:5px;
        }
        .textBox div{
            width:500px;
            height: 3rem;
            border:3px blue dashed;
            background-color: #00aaff;
        }
        #hidden .textBox{
            overflow: hidden;
        }
        #scroll .textBox{
            overflow: scroll;
        }
        #auto .textBox{
            overflow: auto;
        }
        #xAndY .textBox{
            overflow-x: hidden;
            overflow-y: scroll;
        }
        #textOverflow .textBox{
            white-space: nowrap;
        }
        #textOverflow div:nth-of-type(2){
            margin-top: 15px;
            overflow: hidden;/*这一句必须也有*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<h1>4-2溢出控制</h1>
<h3>正常</h3>
<section>
    <div class="textBox">
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
    </div>
    <br><br><br><br>
</section>

<hr>
<h3>hidden</h3>
<code>overflow: hidden;</code>
<section id="hidden">
    <div class="textBox">
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
    </div>
</section>

<h3>scroll</h3>
<code>overflow: scroll;</code>
<section id="scroll">
    <div class="textBox">
        <div>一个宽500px的div</div>
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
    </div>
</section>

<h3>auto</h3>
<code>overflow: auto;</code>
<section id="auto">
    <div class="textBox">
        <div>一个宽500px的div</div>
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
    </div>
</section>

<h3>x隐藏AndY滚动</h3>
<code>    overflow-x: hidden;
    overflow-y: scroll;</code>
<section id="xAndY">
    <div class="textBox">
        <div>一个宽500px的div</div>
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。123456
    </div>
</section>

<h3>text-overflow:ellipsis在溢出时可生成办个事省略号</h3>
<section id="textOverflow">
    <code>两个div都white-space: nowrap;</code>
    <div class="textBox">
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。123456
    </div>
    <code>   overflow: hidden;/*这一句必须也有*/
        text-overflow: ellipsis;</code>
    <div class="textBox">
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。
        这是一段很长很长的文字。这是一段很长很长的文字。这是一段很长很长的文字。123456
    </div>
</section>

</body>
</html>